document.head.insertAdjacentHTML("afterbegin", `
    <style>
        .activitystream_oiForm {
            position: relative;
            margin-bottom: 30px;
            padding: 15px 15px 70px 15px;
        }
        .activitystream_firstNameFormGroup, .activitystream_lastNameFromGroup, .activitystream_emailFormGroup {
            display: block;
        }

        .activitystream_firstNameLabel, .activitystream_lastNameLabel, .activitystream_emailLabel {
            padding-bottom: 5px;
        }

        .activitystream_topicsFormGroup {
            margin-top: 15px;
        }

        .activitystream_inputWrapper {
            margin-bottom: 10px;
        }

        .activitystream_topicLabel {
            vertical-align: middle;
        }

        .activitystream_topicInput {
            vertical-align: middle;
        }

        .activitystream_submitBtn {
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .activitystream_messageWrapper {
            position: absolute;
            left: 15px;
            width: 250px;
            height: 70px;
        }

        /*#newsletter_signup_feedback {*/
        /*    font-family: sans-serif;*/
        /*    position: absolute;*/
        /*    padding: 12px;*/
        /*    border-radius: 5px;*/
        /*}*/
        /*.newsletter_signup_feedback_success {*/
        /*    background-color: greenyellow;*/
        /*}*/
        /*.newsletter_signup_feedback_error {*/
        /*    background-color: red;*/
        /*}*/
        /*.newsletter_signup_feedback_title {*/
        /*    margin-top: 0;*/
        /*    margin-bottom: 0;*/
        /*}*/
        /*.newsletter_signup_feedback_text {*/
        /*    margin-top: 0;*/
        /*    margin-bottom: 0;*/
        /*    font-size: 13px;*/
        /*    line-height: 16px;*/

    </style>
`)

function sendPermissions (data, subscriptions, tenantData, doubleOptIn) {

    // Start Editable Fields
    const API_KEY = tenantData.api_key;
    const tenant = tenantData.tenant;
    // End Editable Fields
    const URL = `https://mailing-service.activitystream.com/opt-ins/api/v1/${doubleOptIn.doubleOptIn ? 'request' : 'opt-in'}`;
    const searchParams = new URLSearchParams();
    Object.keys(data).forEach((key) => {
        if (data[key] != null && data[key] !== '') {
            searchParams.set(key, data[key]);
        }
    });

    const subs = Object.keys((subscriptions || {})).filter(sub => (subscriptions || {})[sub]);
    new Promise(function (resolve, reject) {
        const XHR = new XMLHttpRequest();
        XHR.onreadystatechange = function () {
            if (XHR.readyState === 4) {
                if (XHR.status === 200) {
                    resolve();
                } else {
                    reject();
                }
            }
        }
        XHR.open('POST', `${URL}?apiKey=${API_KEY}&tenant=${tenant}&${searchParams}&topics=${subs.join()}`);
        XHR.send();
    }).then(() => {
        const optInForm = document.getElementById('activitystream_oiForm');
        const messageWrapper = document.getElementById('activitystream_messageWrapper');
        const feedback = document.createElement('div');
        feedback.setAttribute("id", "activitystream_newsletter_signup_feedback");
        feedback.setAttribute("class", "activitystream_newsletter_signup_feedback activitystream_newsletter_signup_feedback_success");
        if (doubleOptIn.doubleOptIn) {
            if (doubleOptIn.successMessage !== '') {
                feedback.innerHTML = `<h4 class="activitystream_newsletter_signup_feedback_text">${doubleOptIn.successMessage}</h4>`;
            } else {
                feedback.innerHTML = '<h4 class="activitystream_newsletter_signup_feedback_text">Check your email to finish subscription</h4>';
            }
        } else {
            if (doubleOptIn.successMessage !== '') {
                feedback.innerHTML = `<h4 class="activitystream_newsletter_signup_feedback_text">${doubleOptIn.successMessage}</h4>`;
            } else {
                feedback.innerHTML = '<h4 class="activitystream_newsletter_signup_feedback_text">Successfully subscribed</h4>';
            }

        }
        optInForm.remove();
        messageWrapper.appendChild(feedback);
    }).catch(() => {
        const optInForm = document.getElementById('activitystream_oiForm');
        const messageWrapper = document.getElementById('activitystream_messageWrapper');
        const feedback = document.createElement('div');
        feedback.setAttribute("id", "activitystream_newsletter_signup_feedback");
        feedback.setAttribute("class", "activitystream_newsletter_signup_feedback activitystream_newsletter_signup_feedback_error");
        if (doubleOptIn.errorMessage !== '') {
            feedback.innerHTML = `<h4 class="activitystream_newsletter_signup_feedback_text">${doubleOptIn.errorMessage}</h4>`;
        } else {
            feedback.innerHTML = '<h4 class="activitystream_newsletter_signup_feedback_text">Failed to subscribe</h4>';
        }
        optInForm.remove();
        messageWrapper.appendChild(feedback);
    }).finally(() => {
        // setTimeout(() => {
        //     (document.getElementById("newsletter_signup_feedback") as HTMLElement).remove();
        // }, 5000);
    });
}

window.sendPermissions = sendPermissions;